<template>
  <div class="inside-page">
    <div class="collection content">
      <p class="detail-title">投递进度</p>
      <div class="filter">
        <span :class="[active === 0 && 'active']" @click="toSearch(0)"
        >全部</span
        >
        <span :class="[active === 1 && 'active']" @click="toSearch(1)"
        >未查看</span
        >
        <span :class="[active === 2 && 'active']" @click="toSearch(2)"
        >被查看</span
        >
        <span :class="[active === 5 && 'active']" @click="toSearch(5)"
        >已邀约</span
        >
        <span :class="[active === 8 && 'active']" @click="toSearch(8)"
        >不合适</span
        >
      </div>
      <Pos-Job-Pro :list="jobList" />
      <!-- <client-only>
        <el-pagination hide-on-single-page
          background
          prev-text="上一页"
          next-text="下一页"
          layout="prev, pager, next"
          :current-page="pageNo"
          :page-size="pageSize"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </client-only> -->
    </div>
  </div>
</template>

<script>
import { userApply } from '@/api/users';

export default {
  asyncData: ({ req }) => ({
  }),
  components: {},
  data () {
    return {
      active: 0,
      total: 0,
      pageNo: 1,
      pageSize: 15,
      jobList: [],
    }
  },
  head () {
    return {
      titleTemplate: (titleChunk) => {
        return `${titleChunk} - 大学生找工作、找实习`;
      }
    }
  },
  created () {

  },
  mounted () {
    this.$nextTick(() => {
      const userId = this.$store.state.user.authUser.id || '';
      userId && this.fetchData(userId);
    })
  },
  watch: {

  },
  computed: {

  },
  methods: {
    handleCurrentChange (val) {
      this.pageNo = val;
      this.fetchData();
    },
    toSearch (active) {
      this.active = active;
      this.pageNo = 1;
      this.fetchData();
    },
    async fetchData (userId) {
      await userApply({
        uid: userId || this.$store.state.user.authUser.id,
        status: this.active,
        page: this.pageNo
      }).then(res => {
        if (res.code === 200) {
          this.total = res.data.count;
          this.jobList = res.data.list;
        } else {
          this.$message.error(res.msg || '网络错误, 稍后再试！');
        }
      }).catch(err => {
        this.$message.error(err || '网络错误, 稍后再试！');
      })
    },
    jumpTo (obj) {
      this.$router.push({
        path: '/job/detail',
        query: { id: obj.id }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.inside-page {
  width: 100%;
  position: relative;
  .collection {
    padding-bottom: 60px;
  }
  .filter {
    height: 50px;
    line-height: 50px;
    background: #f6f7f8;

    span {
      display: inline-block;
      width: 85px;
      height: 18px;
      line-height: 18px;
      font-size: 18px;
      text-align: center;
      color: #999;
      cursor: pointer;
      border-right: 1px solid #ccc;

      &.active,
      &:hover {
        color: #24292f;
      }

      &:last-child {
        border: 0;
      }
    }
  }
}
</style>
